<template>
  <div class>
    <!-- 轮播图 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in lunbotu" :key="item.id">
        <!-- 这里item[imgname] 就是访问item对象里名字为imgname的属性，item[属性]中的属性可以是变量，而item.属性中的属性只能是常量-->
        <img :src="item[imgname]" alt="1" :class="[isfull?'img-full':'img-normal']" />
      </mt-swipe-item>
    </mt-swipe>
    <!-- {{imgname}} -->
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        isfull:false
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
  //   将来谁使用这个轮播图组件，就必须为其传递一个lunbotu数组，同时只能接受img属性的图片作为轮播图展示出来
  // imgname用来设定接收到的数据取得图片对应的属性
  // isfull来决定width是否需要设置100%,首页需要width：100%，商品详情页面需要width自适应，高度100%,图片居中显示
  // isfull为true表示宽高都是100%，如果为false表示宽自适应，高度是100%
  props: ["lunbotu", "imgname", "isfull"],
};
</script>
<style lang='scss' scoped>
.mint-swipe {
    // 保证图片居中显示
  text-align: center;
  height: 200px;
  .mint-swipe-item {
    // img {
    //   width: 100%;
    //   height: 100%;
    // }
    .img-full {
      width: 100%;
      height: 100%;
    }
    .img-normal {
      height: 100%;
    }
  }
}
</style>
